<script>
import * as api from "@/api/user.js"
export default {
    data() {
        return {
            Iphone: "",
            capture: "",
            text: "点击发送手机号",
            flag: true,
            internal: null
        }
    },
    methods: {
        //倒计时的效果
        //定义函数
        //定义变量delay == 5*1000
        //倒计时setInterval
        async sendSms() {
            if (this.flag) {
                let res = await api.getSmssendApi(this.Iphone);
                console.log(res);
                let delay = 5;
                this.text = `${delay.toString().padStart(2, '0')}秒中后重试`
                this.flag = false;
                this.$message.error("短信已经无了")
                this.internal = setInterval(() => {
                    delay--;
                    this.text = `${delay.toString().padStart(2, '0')}秒中后重试`
                    if (delay < 1) {
                        this.text = "点击发送手机号";
                        clearInterval(this.internal);
                        this.flag = true;
                    } else {
                        this.text = `${delay.toString().padStart(2, '0')}秒中后重试`
                    }
                }, 1000);
            }
        },
        async submit() {
            let res = await api.SmsLogin(this.capture);
            console.log(res);
            this.$message.error("短信已经无了")
        }
    }
}
</script>


<template>
    <div id="smScode">
        <el-form-item label="手机号" prop="Iphone">
            <el-input type="text" v-model="Iphone" autocomplete="off" placeholder="Iphone" maxlength="11"
                class="captcha"></el-input>
            <span class="captcha-svg" v-text="text" @click="sendSms"></span>
        </el-form-item>
        <el-form-item label="验证码" prop="capture">
            <el-input type="text" v-model="capture" autocomplete="off" placeholder="验证码" maxlength="6"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" class="btn" @click="submit">登入</el-button>
        </el-form-item>
    </div>
</template>


<style lang="scss" scoped>
.btn {
    width: 320px;
}

.captcha {
    width: 168px;
    vertical-align: top;
    border-right: 0;

    :deep(.el-input__inner) {
        border-right: none;
        vertical-align: top;
    }
}

.captcha-svg {
    display: inline-block;
    height: 39px;
    width: 150px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #DCDFE6;
    border-radius: 0 5px 5px 0;
    border-left: none;
    text-decoration: underline;
    color: #b0b0b0;
    user-select: none;
}

:deep(.el-input__inner) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
</style>